<template>
  <div v-loading="isLoading" class="panel-property">
    <div class="content">
      <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" :componentStyle="form.componentStyle" />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form layer-switching-3d-unique"
        label-position="right"
        :model="form"
        :rules="rules"
      >
        <BaseOption :form="form" option="backgroundColor" :df-color="Variables.boxBgColor" :required="true" />
        <VsFormItem :label="'记录状态'">
          <el-switch v-model="form.recordStatus" size="default"></el-switch>
          <span>&nbsp;</span>
          <el-tooltip
            class="item"
            :effect="xvueTheme"
            content="记录用户上一次离开时所在的按钮"
            placement="top-start"
          >
            <el-button
              type="primary"
              :style="{ marginLeft: '5px' }"
              link
            >
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-button>
          </el-tooltip>
        </VsFormItem>
        <div class="tool-box" style="margin:0 0 5px 5px;">
          <el-button
            class="btn-sure"
            size="default"
            icon="CirclePlus"
            @click.stop="addTableRow()"
          >
            {{ $demoi18n('btn.add') }}
          </el-button>
        </div>
        <el-table
          :data="form.menuList"
          style="width: 100%"
          size="small"
          class="config-panel-table mapping-table"
          :tooltip-effect="xvueTheme"
          :empty-text="$demoi18n('word.noDataAvailable')"
        >
          <el-table-column type="index" width="50" :label="$demoi18n('panel.th.number')"> </el-table-column>
          <el-table-column
            prop="label"
            :label="$demoi18n('名称')"
            min-width="100"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <VsFormItem
                :prop="`menuList[${scope.$index}].label`"
                :rules="
                  generateRules({
                    required: true,
                    label: $demoi18n('名称'),
                  })
                "
              >
                <el-input v-model="scope.row.label" size="default"></el-input>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column prop="iconStart" :label="$demoi18n('默认')" width="45" :render-header="renderTableHeader">
            <template #default="scope">
              <IconEditor
                :icon="scope.row.iconStart.icon"
                :componentStyle="form.componentStyle"
                :hasSync="true"
                @save="saveIcon($event, scope.row.iconStart)"
                @delete="deleteIcon($event, scope.row.iconStart)"
                @sync="syncIcons"
              />
            </template>
          </el-table-column>
          <el-table-column prop="iconStop" :label="$demoi18n('悬停')" width="45" :render-header="renderTableHeader">
            <template #default="scope">
              <IconEditor
                :icon="scope.row.iconStop.icon"
                :componentStyle="form.componentStyle"
                :hasSync="true"
                @save="saveIcon($event, scope.row.iconStop)"
                @delete="deleteIcon($event, scope.row.iconStop)"
                @sync="syncIcons"
              />
            </template>
          </el-table-column>
          <el-table-column
            :label="$demoi18n('图层编码')"
            min-width="100"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <el-input v-model="scope.row.layersCode" size="default"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderTableHeader"
            :label="$demoi18n('跳转页面')"
            :min-width="100"
          >
            <template #default="scope">
              <VsFormItem>
                <el-select
                  v-model="scope.row.pageCode"
                  :class="`panel-data-select-${xvueTheme}`"
                  :popper-class="`select-poper-${xvueTheme}`"
                  :placeholder="`请选择`"
                  size="default"
                >
                  <el-option v-for="(n, i) in curSitePageOptions" :key="i" :label="n.label" :value="n.value"></el-option>
                </el-select>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column prop="icon" :label="$demoi18n('word.operation')" width="60" :render-header="renderTableHeader">
            <template #default="scope">
              <el-button
                icon="SortUp"
                type="primary"
                :disabled="scope.$index === 0"
                link
                @click.stop="moveUp(scope.$index, scope.row)"
              ></el-button>
              <el-button
                class="icon"
                type="primary"
                icon="Delete"
                style="margin-left: 1px;"
                link
                @click.stop="deleteItem(scope)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>

<script lang="jsx">
import xVueAPI from '@/apis/xVue.js';
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import IconEditor from '@/components/common/icon/icon-editor.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import VsFormItem from '@/components/common/vs-form-item/vs-form-item.vue';
import dfCssStyleAttrs from './cssStyle-default-property.js';
import imgUploadBase from '@/mixin/img-upload-base.js';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { generateRules } from '@/utils/rules';
import BaseOption from '../../common/base-option/base-option.vue';
export default {
  name: 'LayerSwitching3dPanelProperty',
  components: {
    IconEditor,
    PanelLabelOverflowTooltip,
    BaseOption,
    OptionCollapse,
    VsFormItem,
  },
  mixins: [panelPropertyBase, imgUploadBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    const form = JSON.parse(JSON.stringify(this.config.config.property));
    return {
      isLoading: false,
      form,
      dfCssStyleAttrs,
      xvueTheme: window._adoPremise.uc.theme,
      curSitePageOptions: [],
    };
  },
  created() {
    this.getSiteAllPage();
  },
  methods: {
    generateRules,
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    getUuid() {
      const tempUrl = URL.createObjectURL(new Blob());
      const uuid = tempUrl.toString();
      URL.revokeObjectURL(tempUrl);
      return uuid.substr(uuid.lastIndexOf('/') + 1);
    },

    // 查询所有site
    getSiteAllPage() {
      return new Promise((resolve, reject) => {
        const { siteId } = window._adoPremise.uc;
        xVueAPI.getSiteSingle(siteId).then(res => {
          if (res && res.data.length > 0) {
            const data = res.data.find(i => i.uuid === siteId);
            this.curSitePageOptions = [];
            this.getAllPage(data.children);
          }
        }).finally(() => {
          resolve();
        });
      });
    },

    // 获取site节点下的所有页面
    getAllPage(data) {
      for(let i = 0; i < data.length; i++) {
        if (String(data[i].resourcesType) === '1') {
          const cityList = {
            value: data[i].uuid,
            label: data[i].pageName || data[i].title,
          };
          this.curSitePageOptions.push(cityList);
        } else {
          data[i].children && this.getAllPage(data[i].children);
        }
      }
    },
    addTableRow() {
      if (this.form.menuList && this.form.menuList.length >= 8) {
        this.$message.warning('菜单目前最多支持8个');
        return;
      }
      const iconDf = {
        icon: '',
        iconSmall: '',
        imgUrl: '',
        uploadList: [],
      };
      this.form.menuList.push({
        id: this.getUuid(),
        label: '',
        iconStart: { ...iconDf },
        iconStop: { ...iconDf },
        layersCode: '',
        pageCode: '',
      });
    },
    moveUp(index) {
      if (index > 0) {
        const temp = this.form.menuList[index - 1];
        this.form.menuList.splice(index - 1, 1);
        this.form.menuList.splice(index, 0, temp);
      }
    },
    deleteItem(scope) {
      const index = scope.$index;
      this.form.menuList.splice(index, 1);
    },
    iconUploaded(iconId, imgList) {
      this.iconMultiUploadCall(iconId, imgList);
    },
    syncIcons(iconConf) {
      this.form.menuList.forEach(n => {
        n.iconStart.icon = this.syncIcon(iconConf, n.iconStart.icon);
        n.iconStop.icon = this.syncIcon(iconConf, n.iconStop.icon);
      });
    },
    renderTableHeader({ column }) {
      return (
        <el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
          <span>{column.label}</span>
        </el-tooltip>
      );
    },
  },
};
</script>
<style lang="less" scoped>
@import '../../common/overflow-tooltip/el-form-item-label-tooltip.less';
</style>
